<script setup lang="ts">
import { getMoreClassicList } from '@/api/index'
import { ref } from 'vue';
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

// 经典电影
const moreClassicList = ref(null)
getMoreClassicList().then(res => {
    console.log(res.data);
    moreClassicList.value = res.data
})



// 跳转到电影详情页
const film=(movie)=>{
    router.push({
        path: '/fil',
        query: {
            movieId: movie.movieId
        }
    })
}
</script>

<template>
    <div class="list" v-if="moreClassicList">
        <div @click="film(movie)" v-for="movie in moreClassicList" :key="movie.movieId" class="listItem">
            <div>
                <van-image width="64rem" height="113rem" fit="cover" :src="movie.poster" />
            </div>
            <div class="content">
                <h3 class="text-ellipsis">{{ movie.movieInfo.title }}</h3>
                <p class="text-ellipsis">主演:{{ movie.movieInfo.actors }}</p>
                <p class="text-ellipsis">{{ movie.movieInfo.showInfo }}</p>
            </div>
            <div>
                <p v-if="movie.score"><span class="score">{{ movie.score }}</span>分</p>
                <p v-else>暂无评分</p>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
.list {
    background-color: #fff;
    padding: 12rem;

    .listItem {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 8rem 0;
        border-bottom: 1px solid #00000018;

        .content {
            width: 60%;

            h3 {
                font-size: 17rem;
                color: #333;
                font-weight: 700;
                margin: 6rem 0;
            }

            p {
                font-size: 13rem;
                color: #666;
                margin: 0;
                margin-top: 6rem;
            }
        }

        p {
            font-size: 12rem;
            color: #999;
            .score {
                font-weight: 700;
                color: #faaf00;
                font-size: 15rem;
                margin-left: 4rem;
            }
        }
    }
}

// 单行文本溢出
.text-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
</style>